<template>
  <div id="shuziren">
    <div class="all-title">数字教师资产库</div>
    <div class="all-box">
      <div class="add-box">
        <div class="add-left">
          <div class="add-title">创建数字人</div>
          <div class="add-sub-title">极速生产口播视频</div>
        </div>
        <div class="add-btn" @click="$router.push('/shuziren_make')">
          立即创作
        </div>
      </div>
      <div class="shu-box">
        <div class="shu-title">最近创作</div>
        <div class="shu-list">
          <div v-for="item in videoList" :key="item.id">
            <div class="list-img">
              <img :src="item.picUrl" alt="" />
              <!-- 播放按钮 -->
              <div class="play-btn" @click.stop="playVideo(item)">
                <i
                  class="iconfont icon-bofang1"
                  style="font-size: 18px; color: #fff"
                ></i>
              </div>
              <div class="video-time">{{ item.time }}</div>
            </div>
            <div class="list-info">
              <div class="list-title">{{ item.name }}</div>
              <div class="list-bottom">
                <div class="data">{{ item.createTime }}</div>
                <div class="createName">创建人：{{ item.teacherName }}</div>
                <!-- <div class="switch">
                  <el-switch
                    v-model="switchValue"
                    class="ml-2"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #a7a7a7"
                  />
                </div> -->
              </div>
              <div class="foot-btns">
                <div class="edit-btn" @click="editVideo(item)">
                  <i class="iconfont icon-bianji"></i>编辑
                </div>
                <div class="delete-btn" @click="deleteVideo(item)">
                  <i class="iconfont icon-shanchu"></i>删除
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 视频播放弹窗 -->
    <el-dialog
      v-model="videoDialogVisible"
      :title="currentVideo.name"
      width="800px"
      :before-close="handleCloseVideo"
      class="video-dialog"
    >
      <div class="video-container">
        <video
          ref="videoPlayer"
          :src="currentVideo.videoUrl"
          controls
          autoplay
          preload="auto"
          width="100%"
          height="450"
          @ended="handleVideoEnded"
        >
          您的浏览器不支持视频播放
        </video>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      courseId: "",
      videoList: [],
      videoDialogVisible: false,
      videoStatusList: [],
      currentVideo: {
        name: "",
        videoUrl: "",
      },
      timer: null, // 轮询定时器
    };
  },
  created() {
    this.courseId = JSON.parse(localStorage.getItem("courseId"));
    this.getVideoList();
  },
  beforeUnmount() {
    // 组件销毁时清除定时器
    this.clearPolling();
  },
  methods: {
    // 获取视频列表
    getVideoList() {
      this.$axios.get(`/tes/digital-human/list`).then((res) => {
        this.videoList = res.data;
        this.videoStatusList = res.data.map((item) => item.status);

        // 检查是否需要轮询
        this.checkPolling();
      });
    },

    // 检查是否需要轮询
    checkPolling() {
      const needPolling = this.videoStatusList.some(
        (status) => status === 0 || status === 2
      );

      if (needPolling) {
        // 如果需要轮询且当前没有定时器，则开始轮询
        if (!this.timer) {
          this.startPolling();
        }
      } else {
        // 如果不需要轮询，清除定时器
        this.clearPolling();
      }
    },

    // 开始轮询
    startPolling() {
      this.timer = setInterval(() => {
        this.getVideoList();
      }, 30000); // 30秒轮询一次
    },

    // 清除轮询
    clearPolling() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },

    // 播放视频
    playVideo(item) {
      if (item.status == 0) {
        this.$message.warning("视频正在处理中，请稍后再试");
        return;
      }
      if (item.status == 2) {
        this.$message.warning("排队等待中，请稍后再试");
        return;
      }
      if (item.status == 3) {
        this.$message.error("播放视频异常，请重新创作视频");
        return;
      }
      this.currentVideo = {
        name: item.name,
        videoUrl: item.filePath || item.videoUrl,
      };
      this.videoDialogVisible = true;
    },

    // 关闭视频弹窗
    handleCloseVideo() {
      this.videoDialogVisible = false;
      // 暂停视频播放
      if (this.$refs.videoPlayer) {
        this.$refs.videoPlayer.pause();
        this.$refs.videoPlayer.currentTime = 0;
      }
    },

    // 视频播放结束
    handleVideoEnded() {
      console.log("视频播放结束");
    },

    // 删除视频
    deleteVideo(item) {
      if (item.source == 1) {
        this.$message.warning("该视频为系统生成，无法删除");
        return;
      }
      this.$confirm("确定删除该视频吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios.post(`/tes/digital-human/delete`, [item.id]).then((res) => {
          this.$message.success("删除成功");
          this.getVideoList();
        });
      });
    },

    // 编辑视频
    editVideo(item) {
      if (item.source == 1) {
        this.$message.warning("该视频为系统生成，无法编辑");
        return;
      }
      this.$router.push({
        path: "/shuziren_make",
        query: {
          id: item.id,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#shuziren {
  .all-box {
    padding: 60px 68px;
    .add-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 418px;
      height: 97px;
      background: linear-gradient(-90deg, #4d89ff, #81b8ff);
      border-radius: 10px;
      padding: 24px 21px;
      box-sizing: border-box;
      .add-left {
        .add-title {
          font-weight: bold;
          font-size: 24px;
          color: #ffffff;
        }
        .add-sub-title {
          font-size: 14px;
          color: #ffffffcc;
        }
      }
      .add-btn {
        width: 95px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: #76a5ff;
        border-radius: 6px;
        font-size: 14px;
        color: #ffffff;
        cursor: pointer;
        &:hover {
          background: #6390ff;
        }
      }
    }
    .shu-box {
      .shu-title {
        font-size: 18px;
        color: #252e54;
        margin: 36px 0 21px;
      }
      .shu-list {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        > div {
          position: relative;
          width: 240px;
          height: 380px;
          background: #ffffff;
          border-radius: 10px;
          border: 1px solid #dee6f1;
          margin-bottom: 30px;
          .list-img {
            position: relative;
            display: flex;
            align-items: center;
            height: 250px;
            background: #eaeef6;
            border-radius: 10px 10px 0px 0px;
            margin-bottom: 14px;
            cursor: pointer;

            /* 播放按钮 */
            .play-btn {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 30px;
              height: 30px;
              background: rgba(0, 0, 0, 0.6);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.3s ease;
              z-index: 2;

              &:hover {
                background: rgba(0, 0, 0, 0.8);
                transform: translate(-50%, -50%) scale(1.1);
              }
            }

            .video-time {
              position: absolute;
              bottom: 14px;
              right: 11px;
              padding: 4px;
              font-size: 12px;
              color: #ffffff;
              background: rgba(0, 0, 0, 0.7);
              border-radius: 4px;
              z-index: 1;
            }
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          .list-info {
            padding: 0 15px;
            .list-title {
              line-height: 1;
              font-weight: bold;
              font-size: 16px;
              color: #252e54;
              margin-bottom: 15px;
            }
            .list-bottom {
              display: flex;
              flex-direction: column;
              gap: 8px;
              font-size: 14px;
              color: #929397;
            }
            .foot-btns {
              position: absolute;
              bottom: 14px;
              right: 11px;
              width: 100%;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              .edit-btn,
              .delete-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 5px;
                color: #457aff;
                cursor: pointer;
                .iconfont {
                  font-size: 14px;
                }
              }
              .edit-btn {
                margin-right: 15px;
              }
            }
          }
        }
      }
    }
  }
}
</style>

<!-- 视频弹窗样式 -->
<style lang="scss">
.video-dialog {
  .el-dialog__body {
    padding: 0;
  }

  .video-container {
    border-radius: 8px;
    overflow: hidden;

    video {
      display: block;
      border-radius: 8px;
    }
  }
}
</style>